M
MLOG
React Lazy Loading: Komponent Kodini Bo'lish Orqali Ishlashni Optimallashtirish | MLOG | MLOG ); } export default ImageGallery;

Va Image.js komponenti:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Ushbu misolda har bir rasm <Suspense> komponenti bilan o'ralgan, shuning uchun har bir rasm yuklanayotganda yuklanish xabari ko'rsatiladi. Bu rasmlar yuklanayotgan vaqtda butun sahifaning bloklanishini oldini oladi.

Ilg'or Texnikalar va Mulohazalar

1. Xatolik Chegaralari (Error Boundaries)

Lazy loadingdan foydalanganda, yuklash jarayonida yuzaga kelishi mumkin bo'lgan potentsial xatoliklarni bartaraf etish muhimdir. Xatolik chegaralari (Error boundaries) bu xatoliklarni ushlash va zaxira UI ko'rsatish uchun ishlatilishi mumkin. Siz quyidagicha xatolik chegarasi komponentini yaratishingiz mumkin:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Holatni yangilang, shunda keyingi renderda zaxira UI ko'rsatiladi.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Shuningdek, xatoni xatoliklar haqida hisobot berish xizmatiga yozib qo'yishingiz mumkin
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI'ni render qilishingiz mumkin
      return 
Nimadir xato ketdi.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Keyin <Suspense> komponentini <ErrorBoundary> bilan o'rang:



  Loading...}>

Agar MyComponent ni yuklash paytida xatolik yuzaga kelsa, <ErrorBoundary> uni ushlaydi va zaxira UI'ni ko'rsatadi.

2. Server Tomonida Render Qilish (SSR) va Lazy Loading

Lazy loading ilovangizning dastlabki yuklanish vaqtini yaxshilash uchun server tomonida render qilish (SSR) bilan birgalikda ham ishlatilishi mumkin. Biroq, bu ba'zi qo'shimcha sozlamalarni talab qiladi. Siz serverning dinamik importlarni to'g'ri bajara olishiga va dangasa yuklangan komponentlarning mijoz tomonida to'g'ri "gidratlanishiga" ishonch hosil qilishingiz kerak.

Next.js va Gatsby.js kabi vositalar SSR muhitlarida lazy loading va kodni bo'lish uchun o'rnatilgan yordamni taqdim etadi, bu jarayonni ancha osonlashtiradi.

3. Dangasa Yuklanadigan Komponentlarni Oldindan Yuklash

Ba'zi hollarda, siz dangasa yuklanadigan komponentni u haqiqatda kerak bo'lishidan oldin oldindan yuklashni xohlashingiz mumkin. Bu tez orada render qilinishi mumkin bo'lgan komponentlar, masalan, sahifaning ko'rinmas qismida joylashgan, ammo aylantirilishi ehtimoli yuqori bo'lgan komponentlar uchun foydali bo'lishi mumkin. Siz komponentni import() funksiyasini qo'lda chaqirish orqali oldindan yuklashingiz mumkin:


import('./MyComponent'); // MyComponent'ni oldindan yuklash

Bu komponentni fonda yuklashni boshlaydi, shuning uchun u haqiqatda render qilinganda tezroq mavjud bo'ladi.

4. Webpack "Sehrli Izohlari" bilan Dinamik Importlar

Webpackning "sehrli izohlari" yaratilgan kod qismlarining nomlarini sozlash imkonini beradi. Bu ilovangizning to'plam tuzilishini tuzatish va tahlil qilish uchun foydali bo'lishi mumkin. Masalan:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Bu umumiy nom o'rniga "my-component.js" (yoki shunga o'xshash) nomli kod qismini yaratadi.

5. Umumiy Xatolardan Qochish

Haqiqiy Dunyodan Misollar va Qo'llash Holatlari

Lazy loading React ilovalarining samaradorligini oshirish uchun keng ko'lamli stsenariylarda qo'llanilishi mumkin. Mana ba'zi misollar:

Misol: Xalqaro Elektron Tijorat Veb-sayti

Butun dunyo bo'ylab mahsulot sotadigan elektron tijorat veb-saytini tasavvur qiling. Turli mamlakatlarda turli xil valyutalar, tillar va mahsulot kataloglari bo'lishi mumkin. Har bir mamlakat uchun barcha ma'lumotlarni oldindan yuklash o'rniga, siz saytga tashrif buyurganlarida faqat foydalanuvchining joylashuviga xos ma'lumotlarni yuklash uchun dangasa yuklashdan foydalanishingiz mumkin.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Foydalanuvchi mamlakatini aniqlash funksiyasi

  return (
    Mintaqangiz uchun kontent yuklanmoqda...}>
      
      
    
  );
}

Xulosa

Lazy loading va komponent kodini bo'lish React ilovalarining samaradorligini optimallashtirish uchun kuchli usullardir. Komponentlarni faqat kerak bo'lganda yuklash orqali siz dastlabki yuklanish vaqtini sezilarli darajada qisqartirishingiz, foydalanuvchi tajribasini yaxshilashingiz va SEO'ni kuchaytirishingiz mumkin. React'ning o'rnatilgan React.lazy() va <Suspense> komponentlari loyihalaringizda dangasa yuklashni amalga oshirishni osonlashtiradi. Global auditoriya uchun tezroq, sezgirroq va jozibadorroq veb-ilovalarni yaratish uchun ushbu usullarni qo'llang.

Dangasa yuklashni amalga oshirayotganda har doim foydalanuvchi tajribasini hisobga olishni unutmang. Ma'lumot beruvchi zaxira UI'larni taqdim eting, potentsial xatoliklarni ohista bartaraf eting va kerakli natijalarga erishayotganingizga ishonch hosil qilish uchun ilovangizning ishlashini diqqat bilan tahlil qiling. Turli xil yondashuvlarni sinab ko'rishdan va o'zingizning maxsus ehtiyojlaringiz uchun eng yaxshi yechimni topishdan qo'rqmang.